<!-- 考生个人页面 -->
<template>
  <el-container style="height: 100%;" id="background">
<!--    <el-header>-->
<!--    </el-header>-->
    <el-main style="height: 100%; text-align: center;">
			<span>
				<h2>个人主页</h2>
			</span>
      <el-form :model="regform" status-icon :rules="regrules" ref="regref" label-width="100px" class="reg_form">
				<span style="margin-left:32px"> 用户头像：
					<el-image style="width: 100px; height: 100px" :src="url+userInfo.img" fit="fit"></el-image>
				</span>
        <el-form-item label="修改头像" v-if="disabled==false">
          <!-- 图片上传
                    action: 默认上传的路径
                    list-type: 上传组件的样式
                    on-preview ： 图片放大的函数
                    on-remove ： 图片移除时的函数
                    on-success ： 图片上传成功后的函数
        -->
          <br>
          <el-upload action="http://localhost/upload" list-type="picture-card"
                     :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="uploadSuccess"
                     :file-list="filelist">
            <i class="el-icon-plus"></i>
          </el-upload>
          <!-- 图片放大后的对话框 -->
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <br><br>
        <el-form-item label="用户名" prop="username">
          <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="regform.username"
                    :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input prefix-icon="el-icon-user" placeholder="请输入姓名" v-model="regform.name"
                    :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="regform.sex" size="small">
            <el-radio-button label="男" :disabled="disabled"></el-radio-button>
            <el-radio-button label="女" :disabled="disabled"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="regform.age" @change="handleChange" :min="1" :max="100" label="年龄"
                           size="small" :disabled="disabled"></el-input-number>
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard">
          <el-input prefix-icon="" v-model="regform.idcard" placeholder="请输入身份证号" :disabled="disabled">
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" prefix-icon="el-icon-key" v-model="regform.password" placeholder="请输入密码"
                    autocomplete="off" show-password :disabled="disabled"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPass" v-if="disabled==false">
          <el-input type="password" prefix-icon="el-icon-key" v-model="regform.checkPass" placeholder="请输入密码"
                    autocomplete="off" show-passwprd>
          </el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input prefix-icon="el-icon-phone" v-model="regform.phone" placeholder="请输入手机号"
                    :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="xueli">
          <el-select v-model="regform.xueli" placeholder="请选择您的学历" :disabled="disabled">
            <el-option v-for="item in xuelis" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-select v-model="regform.major" placeholder="请选择您的专业" :disabled="disabled">
            <el-option v-for="item in majors" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否应届" prop="isyingjie">
          <el-radio-group v-model="regform.isyingjie" size="small">
            <el-radio-button label="是" :disabled="disabled"></el-radio-button>
            <el-radio-button label="否" :disabled="disabled"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="现住址" v-if="disabled==true" prop="address">
          <el-input prefix-icon="" v-model="regform.address" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="住址" v-if="disabled==false" prop="address">
          <el-input prefix-icon="" v-model="regform.address" disabled="true"></el-input>
        </el-form-item>
        <el-form-item v-if="disabled==false" label="选择住址" prop="address">
          <router-view @address="toaddress"></router-view>
        </el-form-item>
        <el-form-item><span style="margin-left: 110px">
						<el-button v-if="disabled==true" type="infor" @click="tokaochang()">考场信息</el-button>
          <!-- 考场信息对话框 -->
						<el-dialog title="考场信息" :visible.sync="kaochangDialogVisible" width="30%"
                       :before-close="handleClose">
							考生号：{{kaochangInfo.examId}}<br>
							考点：{{kaochangInfo.city}} <br>
							考场：{{testroom}} <br>
							座号：{{testroomid}} 
              <!-- 	<span slot="footer" class="dialog-footer">
                  <el-button @click="handleClose">取 消</el-button>
                  <el-button type="primary" @click="">确 定</el-button>
                </span> -->
						</el-dialog>
						<el-button v-if="disabled==true" type="infor" @click="updateUserInfo()">修改信息</el-button>
						<el-button v-if="disabled==false" type="infor" @click="submitForm()">保存信息</el-button>
						<el-button v-if="disabled==false" type="infor" @click="unUpdateUserInfo()">取消修改</el-button>
						<el-button type="infor" @click="$router.go(-1)">返回</el-button>
					</span>
        </el-form-item>
      </el-form>
      <!-- <span style="text-align: center;">Copyright © 2021-2022 Tencent All Rights Reserved</span> -->

    </el-main>
  </el-container>
</template>

<script>
import qs from 'qs';
	import {
		provinceAndCityData,
		CodeToText,
		TextToCode
	} from 'element-china-area-data';
export default {
  data() {
    // 自定义用户名称的验证规则  value要验证的数据   callback是否成功的回调函数
    var checkName = (rule, value, callback) => {
      if (!value) { // value值时空
        return callback(new Error('姓名不能为空'))
      }
      // 判断是否符合邮箱的正则表达式规则
      var reg = /^[\u4e00-\u9fa5]{2,8}$/
      if (!reg.test(value)) { // 满足条件
        return callback(new Error('名称格式不合法'))
      }
      return callback(); // 条件满足
    };
    //自定义规则，验证身份证
    var checkIdcard = (rule, value, callback) => {
      if (!value) { // value值时空
        return callback(new Error('身份证不能为空'))
      }
      // 判断是否符合邮箱的正则表达式规则
      var reg = /^(\d{15}$)|(^\d{17}([0-9]|[xX]))$/
      if (!reg.test(value)) { // 满足条件
        return callback(new Error('身份证格式不合法'))
      }
      return callback(); // 条件满足
    };
    // 自定义规则，验证手机号
    var checkphone = (rule, value, callback) => {
      if (!value) { // value值时空
        return callback(new Error('手机号不能为空'))
      }
      // 判断是否符合手机的正则表达式规则
      var reg = /^[1][0-9]{10}$/
      if (!reg.test(value)) { // 满足条件
        return callback(new Error('手机号格式不合法'))
      }
      return callback(); // 条件满足
    };
    var checkPassword = (rule, value, callback) => {

      var reg = /^[A-Za-z0-9]{2,6}$/
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.regform.checkPass !== '') {
          this.$refs.regref.validateField('checkPass');
        }
        callback();
      }
    };
    var checkPass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.regform.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      /* 头像展示路径 */
      url: 'http://localhost/showImg?filename=',
      /* 默认输入框不能修改 */
      disabled: true,
      /* 考试注册信息 */
      regform: {
        id: 1,
        /* 头像 */
        img: '',
        /* 用户名 */
        username: '',
        /*姓名 */
        name: '',
        /* 性别 */
        sex: '',
        /* 身份证号 */
        idcard: '',
        /* 年龄 */
        age: 0,
        roleId: 0,
        /* 密码 */
        password: '',
        /* 确认密码*/
        checkPassword: '',
        /* 手机 */
        phone: '',
        /* 学历 */
        xueli: '',
        /* 专业 */
        major: '',
        /* 是否应届 */
        isyingjie: '',
        /* 现住址 */
        address: '',
      },
      userInfo: {
        /* 头像 */
        img: '',
        /* 用户名 */
        username: '',
        /*姓名 */
        name: '',
        /* 性别 */
        sex: '',
        /* 身份证号 */
        idcard: '',
        /* 年龄 */
        age: null,
        roleId: 1,
        /* 密码 */
        password: '',
        /* 确认密码*/
        checkPassword: '',
        /* 手机 */
        phone: '',
        /* 学历 */
        xueli: '',
        /* 专业 */
        major: '',
        /* 是否应届 */
        isyingjie: '',
        /* 现住址 */
        address: '',
      },
      xuelis: ['专科', '本科', '硕士', '博士'],
      majors: ['法学', '会计', '财务管理', '电子科学与技术'],
      checked: false,
      /* 上传图片的预览 */
      filelist: [],
      /* 修改图片预览的路径 */
      dialogImageUrl: '',
      /* 修改图片预览的对话框 */
      dialogVisible: false,
      /*考场信息对话框*/
      kaochangDialogVisible: false,
      regrules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
          {
            min: 2,
            max: 8,
            message: '长度在 2 到 8 个字符',
            trigger: 'blur'
          }
        ],
        idcard: [{
          validator: checkIdcard,
          trigger: 'blur'
        }],
        password: [{
          validator: checkPassword,
          trigger: 'blur'
        }],
        checkPass: [{
          validator: checkPass2,
          trigger: 'blur'
        }],
        name: [
          /* 自定义验证规则 */
          {
            validator: checkName,
            trigger: 'blur'
          }
        ],
        phone: [
          /* 自定义验证规则 */
          {
            validator: checkphone,
            trigger: 'blur'
          }
        ]


      },
      //考场信息
      kaochangInfo:'',
      //城市
      city:[],
	  //考场
	  testroom:0,
	  //座号
	  testroomid:0
    };
  },
  methods: {
    //地址转换
    toaddress(val) {
      // console.log(val)
      this.regform.address = val;
    },
    //年龄计数
    handleChange(value) {
      // console.log(value)
      this.regform.age = value;
    },

    async selectUserInfo() {
      var param = new URLSearchParams()
      param.append("id", window.sessionStorage.getItem('id'));
      var res = await this.$http.post('selectByID', param);
      // console.log(res.data.data);
      this.userInfo = res.data.data;
      this.regform = res.data.data;

    },
    /*提交表单*/
    submitForm() {
      if (this.checked == true) {} else {
        this.$refs.regref.validate(async (bo) => {
          if (bo) {
            // console.log(this.regform);
            var res = await this.$http.post("updateAdmin", qs.stringify(this.regform))
            this.disabled = true;
            this.filelist = []; // 清空图片集合数据
            this.$refs.regref.resetFields(); //	清空数据
            if (res.data.code == 200) { // 成功
              this.$message.success(res.data.message)
              // 更新页面数据
              this.$router.push("/userinfo")
            } else { // 失败
              this.$message.error(res.data.message)
            }

          }
        });
      }
    },
    /*重置表单*/
    resetForm() {
      this.$refs.regref.resetFields();
    },
    // 图片移除的函数
    handleRemove(file, fileList) {
      //console.log(file, fileList);
      this.regrules.img = ''; // 移除图片
    },
    // 图片放大的函数
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片上传成功后的函数
    uploadSuccess(response) {
      //console.log(response)
      if (response.code == 200) {
        //把需要上传图片的名称付给用户对象
        this.regform.img = response.message;
        // console.log(this.regform.img)   //打印图片名
        // 处理同时上传多张图片
        // this.addUser.img.push(response.message)
      }
    },
    //取消禁用修改信息
    updateUserInfo() {
      this.disabled = false;
    },
    unUpdateUserInfo() {
      this.disabled = true;
    },
    /*打开查看考场信息对话框,查看考场信息*/
    async tokaochang() {
      this.kaochangDialogVisible = true;
      var param = new URLSearchParams();
      param.append("userId",window.sessionStorage.getItem("id"))
      var res = await this.$http.post('selectStudentByUserId',param);
      this.kaochangInfo=res.data.data;
      var city=this.kaochangInfo.city+"";
      console.log(city)
      city=city.substring(0,3)+"000";
      console.log(city)
      this.city.push(parseInt(city));
      this.city.push(this.kaochangInfo.city)
      var ss=CodeToText[this.city[0]];
	  ss+=CodeToText[this.city[1]];
	  this.kaochangInfo.city=ss;
	  this.testroom=this.kaochangInfo.examId.substring(12,14);
	  this.testroomid=this.kaochangInfo.examId.substring(14,16)
	  // console.log(this.kaochangInfo.city)
      // console.log(res);
      // console.log(this.kaochangInfo);

    },
    /*关闭考场信息对话框*/
    handleClose() {
      this.kaochangDialogVisible = false;
    },
  //  查看报名信息


  },
  created() {
    this.selectUserInfo();
    
  },
}
</script>

<style>
.reg_form {
  /* background-color: gainsboro; */
  width: 600px;
  box-shadow: 0 8px 16px gainsboro, 0 0 6px rgba(0, 0, 0, .04);
  margin: -30px auto;
  padding: 30px 50px;
  text-align: left;
}

.reg_form h2 {
  color: gray;
}

.el-header {
  background-color: #3C8DBC;
}

.head-title {
  display: inline-block;
  float: left;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
#background{
  width: 100%;
  background: url("../img/2.webp");
  background-size: cover;
}
</style>